<template>
  <div>
    <div class="ProOrder">
      <div style="display:flex">
        <set-drop
          setName="批量发货"
          :dropdownList="dropdownList"
          @setClick="command"
          @command="remark"
        />
        <SelectShop
          @changeSel="changeSel"
          style="margin-left:20px"
        ></SelectShop>
      </div>
      <el-dialog
        :visible.sync="someRemark"
        width="30%"
        :before-close="closeHandle"
      >
        <Remark :selectList="selectList" @remarkSure="remarkSure"></Remark>
      </el-dialog>
      <div class="ProOrder__sel">
        <div style="display:flex;margin-left:40px">
          <el-input
            class="filter__right--input"
            v-model="searchText"
            @keyup.enter.native="searchBy"
            clearable
            style="width: 320px;"
            placeholder="请输入搜索内容"
          >
            <el-select
              v-model="searchVal"
              placeholder="搜索条件"
              slot="prepend"
              style="width:125px"
            >
              <el-option
                v-for="item in searchtList"
                :key="item.value"
                :label="item.label"
                :value="item.value"
              ></el-option>
            </el-select>
            <el-button
              slot="append"
              icon="el-icon-search"
              @click="searchBy"
            ></el-button>
          </el-input>
        </div>
      </div>
    </div>
    <ProductTable :proList="proList" ref="proList"></ProductTable>
    <div class="ProBottom">
      <set-drop
        setName="批量发货"
        :dropdownList="dropdownList"
        @setClick="command"
        @command="remark"
        style="margin-top:20px;"
      />
      <PageManage
        :pageSize="pageSize"
        :pageNum="pageNum"
        :total="total"
        @handleSizeChange="handleSizeChange"
        @handleCurrentChange="handleCurrentChange"
      ></PageManage>
    </div>
  </div>
</template>

<script lang="ts">
import { Vue, Component } from "vue-property-decorator";
import ProductTable from "./components/product/ProductTable.vue";
import SelectShop from "./components/product/SelectShop.vue";
import PageManage from "@/components/PageManage.vue";
import { integralOrder, integralRemarkOrder } from "@/api/integral/integral";
import Remark from "../common/Remark.vue";
import SetDrop from "@/views/customer/common/SetDrop.vue";

@Component({
  components: {
    ProductTable,
    SelectShop,
    PageManage,
    Remark,
    SetDrop,
  },
})
export default class ProductOrder extends Vue {
  /** 搜索内容 */
  searchText = "";

  /** 积分商品名称 */
  integralGoodName = "";

  /** 积分商品ID */
  prizeOrderId = "";

  /** 微信昵称 */
  wxuserName = "";

  /** 订单状态 */
  prizeOrderStatus = "-1";

  /** 分页条数 */
  pageSize = 10;

  /** 分页页码 */
  pageNum = 1;

  /** 数据长度 */
  total = 0;

  /** 选中搜索条件 */
  searchVal = "1";

  /** 不同条件搜索 */
  searchtList = [
    {
      value: "1",
      label: "积分商品名称",
    },
    {
      value: "2",
      label: "积分订单ID",
    },
    {
      value: "3",
      label: "微信昵称",
    },
  ];

  /** 批量备注状态 */
  someRemark = false;

  /** 选择数组 */
  selectList = [];

  /** 积分商品订单 */
  proList = [];

  dropdownList = [
    {
      text: "批量备注",
      command: "1",
      show: true,
    },
  ];

  mounted() {
    this.getProOrder();
  }

  /**
   * 获得积分商品
   */
  async getProOrder() {
    const param = {
      current: this.pageNum,
      size: this.pageSize,
      wxuserName: this.wxuserName,
      orderType: 0,
      integralGoodName: this.integralGoodName,
      prizeOrderId: this.prizeOrderId,
      prizeOrderStatus: this.prizeOrderStatus,
    };
    const res = await integralOrder(param);
    this.proList = res.data.list;
    this.total = res.data.total;
  }

  /**
   * 批量选择订单
   */
  remark() {
    const list = (this.$refs.proList as any).$refs.proList.getCheckedItem();
    this.selectList = list.map(item => {
      return item.prizeOrderId;
    });
    if (this.selectList.length === 0) {
      this.$message.error("请先选择备注订单");
      return;
    }
    this.someRemark = true;
  }

  /**
   * 批量备注
   */
  remarkSure(param) {
    const integralOrders = this.selectList;
    integralRemarkOrder({
      integralOrders,
      backRemark: param.backRemark,
      isCoverage: param.isCoverage,
    }).then(res => {
      if (res.code === 200) {
        this.$message.success("备注成功");
        this.someRemark = false;
        this.pageNum = 1
        this.getProOrder();
      }
    });
  }

  /**
   * 关闭弹窗
   */
  closeHandle() {
    this.$confirm(
      "确定退出批量备注窗口？退出后，选中订单备注信息不会保留？",
      "提示",
      {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning",
      },
    ).then(() => {
      this.someRemark = false;
    });
  }

  /**
   * 批量发货
   */
  command() {
    const list = (this.$refs.proList as any).$refs.proList.getCheckedItem();
    if (list.length === 0) {
      this.$message.error("请选择发货订单");
      return;
    }
    const orderList = [] as any;
    list.forEach(item => {
      if (item.prizeOrderStatus === 0) {
        orderList.push(item);
      }
    });
    if (orderList.length === 0) {
      this.$message("暂无待发货订单");
      return;
    }
    this.$router.push({
      name: "DeliverGoods",
      params: { orderList: orderList },
    });
  }

  /**
   * 搜索功能
   */
  searchBy() {
    this.pageNum = 1;
    this.integralGoodName = this.searchVal === "1" ? this.searchText : "";
    this.prizeOrderId = this.searchVal === "2" ? this.searchText : "";
    this.wxuserName = this.searchVal === "3" ? this.searchText : "";
    this.getProOrder();
  }

  /**
   * 下拉选择状态
   */
  changeSel(val) {
    switch (val) {
      case "0":
        this.prizeOrderStatus = "-1";
        break;
      case "1":
        this.prizeOrderStatus = "0";
        break;
      case "2":
        this.prizeOrderStatus = "1";
        break;
      case "3":
        this.prizeOrderStatus = "2";
        break;
    }
    this.pageNum = 1
    this.getProOrder();
  }

  /**
   * @method handleSizeChange
   * @description 每页 条
   */
  handleSizeChange(val) {
    this.pageSize = val;
    this.pageNum = 1
    this.getProOrder();
  }

  /**
   * @method handleCurrentChange
   * @description 当前页
   */
  handleCurrentChange(val) {
    this.pageNum = val;
    this.getProOrder();
  }
}
</script>

<style lang="scss" scoped>
@include b(ProOrder) {
  display: flex;
  justify-content: space-between;
  margin-bottom: 15px;
  @include e(sel) {
    display: flex;
    align-items: center;
    justify-content: space-between;
    font-weight: bold;
  }
}

.search {
  width: 32px;
  height: 32px;
  display: flex;
  justify-content: center;
  align-items: center;
  border: 1px solid #dcdfe6;
  border-left: none;
  border-radius: 4px;
}

.ProBottom {
  // display: flex;
  display: -webkit-box;
  justify-content: space-between;
}
</style>
